<template>
  <div id="BENodeSetting">
    <base-form :formState="formState" @getIndex="getIndex" @addDomain="addDomain" ref="Setting">
      <template #addDomain="{ list, section_index, formItem_index }">
        <div class="org_userlist_title">
          <span>头像</span>
          <span>审核人员</span>
          <span>所属组织</span>
        </div>
        <div class="auditUser_content">
          <div v-for="(item, index) in list" class="auditUser" :key="item" v-if="list && list?.length">
            <img class="img" :src="item.url" />
            <span class="userName">{{ item.userName }}</span>
            <span class="orgName">{{ item.orgName }}</span>
            <span class="iconfont icon-delete" @click="deleteUser(section_index, formItem_index, index)"></span>
          </div>
        </div>

      </template>
    </base-form>
    <base-modal :width="modAlProps.width" :isVisible="isVisible" :title="modAlProps.title" :buttons="buttons"
      :isCancleBtn='isCancleBtn' @handleOk="buttonMessage" @handleCancle="isVisible = false" v-if="isVisible"
      class="select_user_modal">
      <template v-slot:body>
        <!-- 表格展示部分 -->
        <div class="modal_table">
          <div class="header">
            <div>
              <span>所属组织：</span>
              <a-select v-model:value="orgId" placeholder="全部" :showArrow="true" mode="multiple"
                :options="orgList.map((item: any) => ({ value: item.name, label: item.name }))"
                @change="getUserList"></a-select>
            </div>
            <div class="searchContent">
              <a-input v-model:value="searchName" placeholder="搜索用户名称" @blur="getUserList">
                <template #suffix>
                  <i class="iconfont icon-search" @click="getUserList"></i>
                </template>
              </a-input>
            </div>
          </div>
          <div class="baseTable">
            <baseTable :columns="userColumns" :dataSource="userData.records" :isSelect="true" :scroll="scroll"
              ref="baseTable_ref" :isShowPagination="isShowPagination" :rowSelection="rowSelection"
              :showCheckDelete="showCheckDelete" :selectedRowKeys="rowSelectedKey" :total="userData.total"
              @changePage="changePage">
            </baseTable>
          </div>
        </div>
      </template>
    </base-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, nextTick, reactive, computed, } from "vue";
import baseForm from '@/components/form/baseForm.vue';
import columnsName from "@/components/table/tableConfig/columnsName";
import { auditConfig } from './auditNodeConfig';
import baseModal from "@/components/modal/baseModal.vue";
import baseTable from "@/components/table/baseTable.vue";
import { cloneDeep } from 'lodash';
import request from "@/api/index";
import getters from '@/store/getters';
// ts
interface propoties {
  [propName: string]: any;
}
// props
const props = defineProps({
  currentNode: {
    type: Object,
    default: {}
  }
})
//emit
const emits = defineEmits(['changeBENodeName']);

// pinia data
const userInfo = getters.userInfo();

// data
const Setting = ref();
const nodeData = ref<propoties>(props.currentNode);
const formState = ref(cloneDeep(auditConfig));
const sectionIndex = ref<(number)>(0);
const formItemIndex = ref<(number)>(0);
// 选择人员模态框
const isVisible = ref<Boolean>(false);
// 创建新人员模态框相关数据
const SITEFORM = ref<any>(null);//获取子组件
const modAlProps: propoties = reactive({
  width: "M",
  title: "添加审核人员",
});
//模态框button按钮个数和文案修改
let buttons = ref<propoties[]>([
  {
    text: "确定",
    "html-type": "submit",
    keepAlive: true,
  },
]);
let isCancleBtn = ref<Boolean>(true);
// 模态框中basetable相关数据
const userColumns = ref([
  {
    title: '审核人员',
    dataIndex: 'userName',
    key: 'userName',
    width: 242,
    ellipsis: true,
  },
  {
    title: '所属组织',
    dataIndex: 'orgName',
    key: 'orgName',
  },
]); //人员列表表头;
const userData = reactive<propoties>({ total: 0, size: 100000000, records: [] }); // 人员表格数据
const orgList = ref<propoties>([]);
// const orgId = ref([null]);
const orgId = ref([]);
const searchName = ref('');
let scroll: propoties = reactive({ y: 200, isFixed: false }); // 表单滚动设置
const baseTable_ref = ref<any>(null); // basetable的ref
let rowSelectionRows = ref<propoties[]>([]); // 表格中已选中的表单项
let rowSelection = ref<(string | number)[]>([]); // 表格中已选中的表单项
let rowSelectedKey = ref<(string | number)[]>([]); // 表格中已选中的表单项

const isShowPagination = false; // 是否需要配分页器
const showCheckDelete = true;  // 是否需要分页器中的自定义全选和删除
//watch
watch(() => props.currentNode, (newVal, oldVal) => {
  nodeData.value = newVal;
  let form = newVal.form;
  formState.value.forEach((item) => {
    item.children.forEach((data: propoties) => {
      if (data.param) {
        data.value = form[data.param];
      }
    })
  });
}, { immediate: true, deep: true })
watch(() => cloneDeep(formState.value), (newVal, oldVal) => {
  if (newVal != oldVal) {
    let form = nodeData.value.form;
    formState.value.forEach((item) => {
      item.children.forEach((data: propoties) => {
        if (data.param) {
          form[data.param] = data.value;
        }
      })
    });
  }
})
// computed
rowSelectionRows = computed(() => {
  return baseTable_ref.value.selectedRow
})
// methods
// 获取index
const getIndex = (section_index: number, formItem_index: number,) => {
  sectionIndex.value = section_index;
  formItemIndex.value = formItem_index;
}
// 添加人员
const addDomain = (section_index: number, formItem_index: number) => {
  sectionIndex.value = section_index;
  formItemIndex.value = formItem_index;
  let value = formState.value[sectionIndex.value].children[formItemIndex.value - 1].value;
  rowSelectedKey.value = [...value.map((item: propoties) => item.id)];
  getOrgList(); // 获取可见组织
}
// 获取组织列表
const getOrgList = () => {
  request.fetchUserOrgList({}).then((res: any) => {
    // orgList.value = [{id: null, name: '全部'},...res]
    orgList.value = [...res]

    getUserList()
    isVisible.value = true;
  })
}
// 获取组织用户列表
const getUserList = (datas: propoties = {}) => {
  let arr = []
  for (let i = 0; i < orgId.value.length; i++) {
    for (let v = 0; v < orgList.value.length; v++) {
      if (orgId.value[i] === orgList.value[v].name) {
        arr.push(orgList.value[v].id)
      }
    }
  }

  let params = {
    userName: searchName.value,
    orgIds: arr || userInfo.orgId,
    // pageNumber: datas.pageNumber || 0,
    // pageSize: datas.pageSize || 100000000,
    // status: 1,
  }
  request.getAuditers(params).then((res: propoties) => {

    userData.records = res;
    // console.log(userData.records, '332');
  })
}
// 选择人员
const buttonMessage = async () => {
  //点击确定
  let value: any[] = [];
  if (value instanceof Array) {
    rowSelectionRows.value.forEach((item: any) => {
      value.push({
        url: item.url,
        userName: item.userName,
        orgName: item.orgName,
        id: item.id,
        orgId: item.orgId,
      })
    })
  }
  formState.value[sectionIndex.value].children[formItemIndex.value - 1].value = value;
  rowSelectedKey.value = [...value.map((item: propoties) => item.id)];
  Setting.value.baseForm.validate();
  isVisible.value = false;
};
//删除人员
const deleteUser = (section_index: number, formItem_index: number, index: number) => {
  let value = formState.value[section_index].children[formItem_index].value;
  if (value instanceof Array) {
    value.splice(index, 1)
  }
  rowSelectedKey.value = [...value.map((item: propoties) => item.id)];
}
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: propoties = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize
  }
  getUserList(datas);
}
// defineProps
defineExpose({ Setting });

</script>

<style lang="less">
#BENodeSetting {
  .org_userlist_title {
    display: flex;
    margin: 24px 0 12px;
    background: #fdfdfd;

    span:nth-of-type(1) {
      width: 32px;
      text-align: left;
    }

    span:nth-of-type(2) {
      margin-left: 12px;
      width: 82px;
      text-align: left;
    }

    span:nth-of-type(3) {
      margin-left: 12px;
      text-align: left;
    }
  }

  .ant-form-item:nth-of-type(1),
  .jointlyType {
    height: 66px;
    flex-direction: column;
    margin-left: 0;

    .ant-form-item-label {
      justify-content: start;
      display: flex;
    }

    .ant-form-item-control {
      width: 304px;
    }

    .ant-select {
      width: 100%;
      text-align: left;
    }
  }

  .ant-form-item {
    margin-left: 0;
    justify-content: space-between;

    .ant-form-item-label {
      width: auto;
    }

  }

  .justTitle {
    height: 14px;
    line-height: 14px;
    margin-bottom: -8px;

    .ant-form-item-control-input {
      min-height: 14px;

      .ant-form-item-control-input-content {
        text-align: left;

      }
    }
  }

  .baseTitle {
    padding-top: 32px;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 16px;
  }

  .notify {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }

  .aduitMassege {
    margin-top: 20px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }

  .auditUser_content {
    max-height: 250px;
    overflow: auto;
  }

  .auditUser {
    display: flex;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    height: 32px;
    margin-bottom: 16px;
    align-items: center;
    text-align: left;


    &:nth-of-type(1) {
      margin-top: 24px;
    }

    &:nth-last-of-type(1) {
      margin-bottom: 0;
    }

    .img {
      height: 32px;
      width: 32px;
      border-radius: 100%;
      overflow: hidden;
    }

    .userName {
      margin-left: 12px;
      width: 82px;
    }

    .orgName {
      margin: 0 16px;
      width: 130px;
    }

    .userName,
    .orgName {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .swicth_border_bottom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .formItem5 {
    border: none;
  }

  .jointlyType {
    margin-bottom: 24px;
    margin-top: 16px;
  }

  .formItem7 {
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .formItem8 {
    border: none;
  }

  .formItem10 {
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .timeout,
  .jointlyPassRatio {
    .ant-form-item-control-input-content {
      display: flex;
      align-items: center;

      .ant-input-number {
        width: 148px;
      }
    }

    margin-bottom:24px;
  }

  .ant-checkbox-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .ant-checkbox-wrapper {
      margin-left: 0;
    }
  }

  .notifyOptions_tips {
    width: 187px;
  }

  .notifyOptions_tips_icon {
    margin-left: 4px;
  }
}
</style>
<style lang="less">
.select_user_modal {
  .ant-modal-body {
    overflow: hidden;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;

    .ant-select {
      width: 312px;
    }
  }

  .searchContent {
    width: 192px;
  }

  .ant-table-thead {
    .ant-table-cell:nth-last-of-type(1) {
      text-align: left;
    }
  }

  .modal_table {
    height: 100%;
    overflow: hidden;
  }
}

.ant-select-selection-placeholder {
  color: rgba(0, 0, 0, 0.85);
}
</style>